<template>
  <div class="form-container applymentnew-form">
    <el-form
      label-width="140px"
      size="medium"
      label-position="left"
      status-icon
      :model="formData"
      :rules="rules"
      ref="formData"
    >
      <div class="form-item">
        <div class="form-item-hd">商户信息</div>
        <div class="form-item-bd" :class="{ 'is-company': currentCreateType === '企业商户' }">
          <div class="company-merchant-item" v-if="currentCreateType === '企业商户'">
            <div class="company-title">营业执照</div>
            <el-form-item
              label="营业执照照片"
              class="widthout-tips"
              v-if="!formData.businessLicenBase64"
              prop="businessLicense"
            >
              <div class="upload-box">
                <div class="top-tips">需年检章齐全（当年成立公司除外）</div>
                <div class="tips s">须为彩色图片且小于2M，文件格式为png、jpeg、jpg</div>
                <div class="upload-btn-box">
                  <el-button type="primary" plain>上传文件</el-button>
                  <input
                    type="file"
                    class="file-button"
                    accept="image/jpeg, image/png, image/gif"
                    @change="businessLicenChange"
                  />
                </div>
                <div class="img-box" v-if="formData.businessLicense">
                  <img :src="formData.businessLicense" alt />
                </div>
                <el-input v-show="false" v-model="formData.businessLicense"></el-input>
              </div>
            </el-form-item>

            <el-form-item
              label="营业执照照片"
              class="widthout-tips"
              v-if="formData.businessLicenBase64"
              prop="businessLicenBase64"
            >
              <div class="upload-box">
                <div class="top-tips">需年检章齐全（当年成立公司除外）</div>
                <div class="tips s">须为彩色图片且小于2M，文件格式为png、jpeg、jpg</div>
                <div class="upload-btn-box">
                  <el-button type="primary" plain>上传文件</el-button>
                  <input
                    type="file"
                    class="file-button"
                    accept="image/jpeg, image/png, image/gif"
                    @change="businessLicenChange"
                  />
                </div>
                <div class="img-box" v-if="formData.businessLicenBase64">
                  <img :src="'data:image/jpeg;base64,' + formData.businessLicenBase64" alt />
                </div>
                <el-input v-show="false" v-model="formData.businessLicenBase64"></el-input>
              </div>
            </el-form-item>

            <el-form-item
              label="特殊资质"
              class="widthout-tips"
              v-if="!formData.qualificationsBase64"
              prop="qualifications"
            >
              <div class="upload-box">
                <div class="tips s">须为彩色图片且小于2M，文件格式为png、jpeg、jpg</div>
                <div class="upload-btn-box">
                  <el-button type="primary" plain>上传文件</el-button>
                  <input
                    type="file"
                    class="file-button"
                    accept="image/jpeg, image/png, image/gif"
                    @change="qualificationsChange"
                  />
                </div>
                <div class="img-box" v-if="formData.qualifications">
                  <img :src="formData.qualifications" alt />
                </div>
                <el-input v-show="false" v-model="formData.qualifications"></el-input>
              </div>
            </el-form-item>

            <el-form-item
              label="特殊资质"
              class="widthout-tips"
              v-if="formData.qualificationsBase64"
              prop="qualificationsBase64"
            >
              <div class="upload-box">
                <div class="tips s">须为彩色图片且小于2M，文件格式为png、jpeg、jpg</div>
                <div class="upload-btn-box">
                  <el-button type="primary" plain>上传文件</el-button>
                  <input
                    type="file"
                    class="file-button"
                    accept="image/jpeg, image/png, image/gif"
                    @change="qualificationsChange"
                  />
                </div>
                <div class="img-box" v-if="formData.qualificationsBase64">
                  <img :src="'data:image/jpeg;base64,' + formData.qualificationsBase64" alt />
                </div>
                <el-input v-show="false" v-model="formData.qualificationsBase64"></el-input>
              </div>
            </el-form-item>

            <el-form-item label="营业执照注册号" class="widthout-tips" prop="businessLicenseCode">
              <el-input placeholder="营业执照注册号（必填）" v-model="formData.businessLicenseCode" clearable></el-input>
            </el-form-item>
            <div class="range-date-box">
              <div class="date-form-item range-date-item">
                <el-form-item label="营业期限" prop="businessStartTime">
                  <el-date-picker
                    v-model="formData.businessStartTime"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                  ></el-date-picker>
                </el-form-item>

                <el-form-item
                  label
                  label-width="0px"
                  v-if="!formData.companyisLongTime"
                  prop="businessEndTime"
                  class="second-date-item"
                >
                  <span class="connect" style="transform: translateX(3px);">至</span>
                  <el-date-picker
                    v-model="formData.businessEndTime"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                  ></el-date-picker>
                </el-form-item>
                <el-checkbox v-model="formData.companyisLongTime">长期</el-checkbox>
              </div>

              <p class="range-date-tips">证件有效期限需与上传文件上所示期限一致，若有效期超过2100年，请选择“长期”</p>
            </div>
            <el-form-item label="经营范围" prop="businessScope">
              <el-input
                placeholder="经营范围（必填）"
                type="textarea"
                :rows="4"
                v-model="formData.businessScope"
                clearable
              ></el-input>
              <p class="form-item-tips" style="top: 102px;">与企业工商营业执照上一致</p>
            </el-form-item>
          </div>
          <div class="company-merchant-item" v-if="currentCreateType === '企业商户'">
            <div class="company-title">基本信息</div>
            <el-form-item label="企业名称" prop="businessName">
              <el-input placeholder="企业名称（必填）" v-model="formData.businessName" clearable></el-input>
              <p class="form-item-tips">企业名称需与营业执照登记公司名称一致</p>
            </el-form-item>
            <el-form-item label="注册地址" prop="registeredAddress">
              <el-input placeholder="注册地址（必填）" v-model="formData.registeredAddress" clearable></el-input>
              <p class="form-item-tips">注册地址需与营业执照登记住所一致</p>
            </el-form-item>
          </div>
          <div class="company-merchant-item">
            <div class="company-title" v-if="currentCreateType === '企业商户'">企业法人/经办人</div>
            <el-form-item
              label="身份证正面照片"
              class="widthout-tips"
              v-if="!formData.idCardFrontBase64"
              prop="idCardFront"
            >
              <div class="upload-box">
                <div class="tips">须为彩色图片且小于2M，文件格式为png、jpeg、jpg</div>
                <div class="upload-btn-box">
                  <el-button type="primary" plain>上传文件</el-button>
                  <input
                    type="file"
                    class="file-button"
                    accept="image/jpeg, image/png, image/gif"
                    @change="idCardFrontChange"
                  />
                </div>
                <div class="img-box" v-if="formData.idCardFront">
                  <img :src="formData.idCardFront" alt />
                </div>
                <el-input v-show="false" v-model="formData.idCardFront"></el-input>
              </div>
            </el-form-item>

            <el-form-item
              label="身份证正面照片"
              class="widthout-tips"
              v-if="formData.idCardFrontBase64"
              prop="idCardFrontBase64"
            >
              <div class="upload-box">
                <div class="tips">须为彩色图片且小于2M，文件格式为png、jpeg、jpg</div>
                <div class="upload-btn-box">
                  <el-button type="primary" plain>上传文件</el-button>
                  <input
                    type="file"
                    class="file-button"
                    accept="image/jpeg, image/png, image/gif"
                    @change="idCardFrontChange"
                  />
                </div>
                <div class="img-box" v-if="formData.idCardFrontBase64">
                  <img :src="'data:image/jpeg;base64,' + formData.idCardFrontBase64" alt />
                </div>
                <el-input v-show="false" v-model="formData.idCardFrontBase64"></el-input>
              </div>
            </el-form-item>

            <el-form-item
              label="身份证反面照片"
              class="widthout-tips"
              v-if="!formData.idCardBackBase64"
              prop="idCardFront"
            >
              <div class="upload-box">
                <div class="tips">须为彩色图片且小于2M，文件格式为png、jpeg、jpg</div>
                <div class="upload-btn-box">
                  <el-button type="primary" plain>上传文件</el-button>
                  <input
                    type="file"
                    class="file-button"
                    accept="image/jpeg, image/png, image/gif"
                    @change="idCardBackChange"
                  />
                </div>
                <div class="img-box" v-if="formData.idCardBack">
                  <img :src="formData.idCardBack" alt />
                </div>
                <el-input v-show="false" v-model="formData.idCardBack"></el-input>
              </div>
            </el-form-item>

            <el-form-item
              label="身份证反面照片"
              class="widthout-tips"
              v-if="formData.idCardBackBase64"
              prop="idCardFrontBase64"
            >
              <div class="upload-box">
                <div class="tips">须为彩色图片且小于2M，文件格式为png、jpeg、jpg</div>
                <div class="upload-btn-box">
                  <el-button type="primary" plain>上传文件</el-button>
                  <input
                    type="file"
                    class="file-button"
                    accept="image/jpeg, image/png, image/gif"
                    @change="idCardBackChange"
                  />
                </div>
                <div class="img-box" v-if="formData.idCardBackBase64">
                  <img :src="'data:image/jpeg;base64,' + formData.idCardBackBase64" alt />
                </div>
                <el-input v-show="false" v-model="formData.idCardBackBase64"></el-input>
              </div>
            </el-form-item>

            <el-form-item label="证件号码" class="widthout-tips" prop="idCardNumber">
              <el-input placeholder="证件号码（必填）" v-model="formData.idCardNumber" clearable></el-input>
            </el-form-item>

            <el-form-item label="证件持有人姓名" class="widthout-tips" prop="certificateHolderName">
              <el-input
                placeholder="证件持有人姓名（必填）"
                v-model="formData.certificateHolderName"
                clearable
              ></el-input>
            </el-form-item>

            <div class="range-date-box">
              <div class="date-form-item range-date-item">
                <el-form-item label="证件有效期" prop="idCardStartTime">
                  <el-date-picker
                    v-model="formData.idCardStartTime"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                  ></el-date-picker>
                </el-form-item>

                <el-form-item
                  label
                  label-width="0px"
                  v-if="!formData.isLongTime"
                  prop="idCardEndTime"
                  class="second-date-item"
                >
                  <span class="connect" style="transform: translateX(3px);">至</span>
                  <el-date-picker
                    v-model="formData.idCardEndTime"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                  ></el-date-picker>
                </el-form-item>
                <el-checkbox v-model="formData.isLongTime">长期</el-checkbox>
              </div>

              <p class="range-date-tips">证件有效期限需与上传文件上所示期限一致，若有效期超过2100年，请选择“长期”</p>
            </div>
          </div>
        </div>
      </div>
    </el-form>

    <div class="action-box applymentnew">
      <el-button type="primary" size="medium" plain @click="goBackSetp">上一步</el-button>
      <el-button type="primary" size="medium" @click="goNextStep">保存并下一步</el-button>
    </div>
  </div>
</template>

<script>
import common from "@/mixins/common.js";
import otps from "./opts";
export default {
  name: "merchant",
  mixins: [common],
  props: ["oldMerchantInfo", "currentCreateType"],
  data() {
    var validateIdCardDate = (rule, value, callback) => {
      const startTime = this.formData.idCardStartTime
        ? new Date(this.formData.idCardStartTime).getTime()
        : "";
      const endTime = value ? new Date(value).getTime() : "";

      if (value === "") {
        callback(new Error("证件结束时间不能为空"));
      } else if (endTime < startTime) {
        callback(new Error("请提供有效期在60天以上的证件，并如实填写有效期!"));
      } else if (endTime - startTime < 24 * 60 * 60 * 1000 * 61) {
        callback(new Error("请提供有效期在60天以上的证件，并如实填写有效期!"));
      } else {
        callback();
      }
    };

    var validateBusinessDate = (rule, value, callback) => {
      const startTime = this.formData.businessStartTime
        ? new Date(this.formData.businessStartTime).getTime()
        : "";
      const endTime = value ? new Date(value).getTime() : "";

      if (value === "") {
        callback(new Error("执照结束时间不能为空"));
      } else if (endTime < startTime) {
        callback(new Error("请提供有效期在60天以上的执照，并如实填写有效期!"));
      } else if (endTime - startTime < 24 * 60 * 60 * 1000 * 61) {
        callback(new Error("请提供有效期在60天以上的执照，并如实填写有效期!"));
      } else {
        callback();
      }
    };
    return {
      otps,
      formData: {
        idCardFront: "",
        idCardFrontBase64: "",
        idCardBack: "",
        idCardBackBase64: "",
        certificateHolderName: "",
        idCardNumber: "",
        idCardStartTime: "",
        idCardEndTime: "",
        businessStartTime: "",
        businessEndTime: "",
        businessTime: "",
        idCardValidTime: "",
        registeredAddress: "",
        businessName: "",
        businessLicenseCode: "",
        businessLicenBase64: "",
        businessLicense: "",
        businessScope: "",
        isLongTime: false,
        companyisLongTime: false,
        qualifications: "",
        qualificationsBase64: ""
      },
      rules: {
        businessName: [
          { required: true, message: "企业名称不能为空", trigger: "blur" }
        ],
        registeredAddress: [
          { required: true, message: "注册地址不能为空", trigger: "blur" }
        ],
        businessLicenseCode: [
          { required: true, message: "营业执照注册号不能为空", trigger: "blur" }
        ],
        certificateHolderName: [
          { required: true, message: "证件持有人姓名不能为空", trigger: "blur" }
        ],
        idCardNumber: [
          { required: true, message: "证件号码不能为空", trigger: "blur" }
        ],
        idCardFront: [
          { required: true, message: "请上传身份证正面照片", trigger: "blur" }
        ],
        idCardFrontBase64: [
          { required: true, message: "请上传身份证正面照片", trigger: "blur" }
        ],
        idCardBack: [
          { required: true, message: "请上传身份证反面照片", trigger: "blur" }
        ],
        idCardBackBase64: [
          { required: true, message: "请上传身份证反面照片", trigger: "blur" }
        ],
        businessLicense: [
          { required: true, message: "请上传营业执照照片", trigger: "blur" }
        ],
        businessLicenBase64: [
          { required: true, message: "请上传营业执照照片", trigger: "blur" }
        ],
        businessScope: [
          { required: true, message: "经营范围不能为空", trigger: "blur" }
        ],
        idCardStartTime: [
          { required: true, message: "证件开始时间不能为空", trigger: "change" }
        ],
        idCardEndTime: [{ validator: validateIdCardDate, trigger: "change" }],
        businessStartTime: [
          { required: true, message: "执照开始时间不能为空", trigger: "change" }
        ],
        businessEndTime: [
          { validator: validateBusinessDate, trigger: "change" }
        ]
      }
    };
  },
  created() {
    if (this.oldMerchantInfo) {
      this.formData = this.oldMerchantInfo;
    }
  },
  methods: {
    async qualificationsChange(e) {
      const isLt2M = e.target.files[0].size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.showToast("上传图片不能大于2M", 2);
        return;
      }
      const base64String = await this.getImgBase64(e);
      this.formData.qualificationsBase64 = base64String;
    },
    async businessLicenChange(e) {
      const isLt2M = e.target.files[0].size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.showToast("上传图片不能大于2M", 2);
        return;
      }
      const base64String = await this.getImgBase64(e);
      this.formData.businessLicenBase64 = base64String;
    },
    async idCardFrontChange(e) {
      const isLt2M = e.target.files[0].size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.showToast("上传图片不能大于2M", 2);
        return;
      }
      const base64String = await this.getImgBase64(e);
      this.formData.idCardFrontBase64 = base64String;
    },
    async idCardBackChange(e) {
      const isLt2M = e.target.files[0].size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.showToast("上传图片不能大于2M", 2);
        return;
      }
      const base64String = await this.getImgBase64(e);
      this.formData.idCardBackBase64 = base64String;
    },
    getImgBase64(e) {
      return new Promise(resolve => {
        var f = e.target.files[0];
        var reader = new FileReader();
        reader.onload = (function(theFile) {
          return function(e) {
            var binaryData = e.target.result;
            var base64String = window.btoa(binaryData);
            resolve(base64String);
          };
        })(f);
        reader.readAsBinaryString(f);
      });
    },
    goBackSetp() {
      this.$emit("setFormData", "merchantInfo", this.formData);
      this.$emit("goBackSetp");
    },
    goNextStep() {
      this.$refs["formData"].validate(valid => {
        if (valid) {
          this.$emit("setFormData", "merchantInfo", this.formData);
          this.$emit("goNextStep");
        } else {
          return false;
        }
      });
    }
  },
  watch: {
    oldMerchantInfo(val) {
      if (this.oldMerchantInfo) {
        this.formData = this.oldMerchantInfo;
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "./common.less";
.range-date-box {
  position: relative;
  .range-date-item {
    display: flex;
    align-items: center;
  }
}

.company-title {
  font-size: 14px;
  color: #666666;
  padding-left: 12px;
  position: relative;
  margin-bottom: 20px;
  margin-left: -14px;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background: #00ae47;
  }
}

.is-company {
  .company-merchant-item {
    border-bottom: 1px solid #d7dce2;
    padding-bottom: 30px;
    margin-bottom: 30px;
    padding-left: 20px;
    &:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }
  }
}
</style>
